<template>
  <div class="body_" v-loading="loading" element-loading-text="正在发布节目请稍等" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="header">
      <div class="TitleForm">
        <el-form ref="TitleForm" :model="TitleForm" label-width="120px" inline>
          <el-form-item label="节目名称" prop="name">
            <el-input placeholder="请输入名称或编码" v-model="TitleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所属LED屏幕名称" label-width="140px" prop="ledName">
            <!--            <el-select v-model="TitleForm.lamp_id">-->
            <!--              <el-option-->
            <!--                v-for="item in lampoptions"-->
            <!--                :key="item.value"-->
            <!--                :label="item.label"-->
            <!--                :value="item.value"-->
            <!--                @click.native="lampChange(item)"-->
            <!--              ></el-option>-->
            <!--            </el-select>-->
            <el-input placeholder="请输入名称" v-model="TitleForm.ledName"></el-input>
          </el-form-item>
        </el-form>
        <div class="queryBtn">
          <el-button type="primary" icon="el-icon-search" @click="Select(true)">搜索</el-button>
          <el-button @click="resetSearchForm('TitleForm')" type="primary" icon="el-icon-refresh-left">重置</el-button>
        </div>
      </div>
    </div>

    <div class="main">
      <el-table :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
        :data="tableData" style="width: 100%">
        <el-table-column prop="date" :index="indexAdd" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="节目名称" width="180">
        </el-table-column>
        <el-table-column prop="typename" label="节目类型"> </el-table-column>
        <el-table-column prop="ledName" label="所属LED"> </el-table-column>
        <el-table-column prop="picUrl" label="缩略图">
          <template slot-scope="scope">
            <img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="Product Image" width="80" height="80"/>
            <video v-if="scope.row.videoUrl" :src="scope.row.videoUrl" alt="Product Image" width="80" height="80"/>
          </template></el-table-column>
        <el-table-column prop="ip" label="LDE屏幕IP"> </el-table-column>
        <!--        <el-table-column prop="ProgramCode" label="节目编码"> </el-table-column>-->
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">

            <span class="operter" @click="PublishShow(scope.row)">发布</span>
            <span class="operter" @click="DeleteShow(scope.row)">删除 </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[1, 5, 10]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getPrograList,
    delPrograms,
    sendPrograms
  } from "@/api/LED.js";
  export default {
    mounted() {
      this.Select();
    },
    data() {
      return {
        loading: false,
        lampoptions: [],
        activeName: "first",
        tableData: [],
        currentPage: 1, // 当前页码
        total: 20, // 总条数
        pageSize: 10, // 每页的数据条数

        TitleForm: {
          name: "",
          ledName: "",
          time: "",
        },
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleSizeChange(e) {
        this.pageSize = e;
        this.Select(false);
      },
      handleCurrentChange(e) {
        this.currentPage = e;
        this.Select(false);
      },
      // 查询
      async Select(type) {
        if (type) {
          this.currentPage = 1;
          this.pageSize = 10;
        }
        let {
          data: res
        } = await getPrograList({
          page: this.currentPage,
          pageSize: this.pageSize,
          ledName: this.TitleForm.ledName,
          name: this.TitleForm.name,
        });
        this.tableData = [];
        this.total = Number(res.total);
        res.records.forEach((e) => {
          let item = {
            id: e.id,
            name: e.name,
            area: e.area,
            ctime: e.ctime,
            animation: e.animation,
            ip: e.ip,
            ledId: e.ledId,
            ledName: e.ledName,
            picUrl: e.picUrl,
            state: e.state,
            stayTime: e.stayTime,
            textContent: e.textContent,
            textStyle: e.textStyle,
            type: e.type,
            uptime: e.uptime,
            videoUrl: e.videoUrl,
          };
          if (e.type == "0") {
            item.typename = "文本";
          } else if (e.type == "1") {
            item.typename = "图片";
          } else {
            item.typename = "视频";
          }

          this.tableData.push(item);
        });
      },
      // 删除节目
      DeleteShow(row) {
        this.$confirm("此操作将永久删除该节目, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            console.log(row);
            delPrograms({
              id: row.id
            }).then((res) => {
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.Select(true);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      // 发布节目
      PublishShow(row) {
        let query = {
          proID: String(row.id),
          all: true,
        };
        this.$confirm("发布节目将覆盖原有节目, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.loading = true;
            sendPrograms(query).then((res) => {
              this.loading = false;
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "发布成功!",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      // 序号递增
      indexAdd(index) {
        return index + this.pageSize * (this.currentPage - 1) + 1;
      },
      resetSearchForm(formName) {
        this.$refs[formName].resetFields();
        this.Select(true);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .body_ {
    overflow: hidden;
    padding-top: 0.2625rem;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      //height: 0.85rem /* 68/80 */;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .main {
      margin-top: 0.3rem
        /* 24/80 */
      ;
      width: 100%;
      //height: 8.925rem /* 618/80 */;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      flex: 1;
    }
  }

  .operter {
    color: rgba(59, 140, 255, 1) !important;
    cursor: pointer;
    margin-right: 4px;
  }
</style>
